﻿<!DOCTYPE html>
<!-- extends表明此页面继承自 base.html 文件 -->
{% extends "base.html" %}
<!-- 写入 base.html 中定义的 title -->
{% block title %}
    首页
{% endblock title %}

<!-- 写入 base.html 中定义的 content -->
{% block content %}
    <html lang="zh-CN">
    <head>
        <meta http-equiv="Content-Type" content="text/html; Charset=gb2312">
        <meta http-equiv="Content-Language" content="zh-CN">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
        <title>川塔 - 主页</title>
        <!-- 本页样式表 -->
        <link href="{% static 'css/home.css' %}" rel="stylesheet"/>
        <!--全局样式表-->
        <link rel="stylesheet" href="{% static 'css/global.css' %}"/>
        <script>$("div.canvas-banner").css("display","block");</script>
    </head>
    <body>
    <!-- 主体（一般只改变这里的内容） -->
    <div class="blog-body">

        <!-- 这个一般才是真正的主体内容 -->
        <div class="blog-container">
            <div class="blog-main">
                <!-- 网站公告提示 -->
                <div class="home-tips shadow">
                    <i style="float:left;line-height:17px;" class="fa fa-volume-up"></i>
                    <div class="home-tips-container">
                        {% for notice in notices %}
                            <span style="color: {{ notice.notice_color }}">{{ notice.notice_name }}<a
                                    href="{{ notice.notice_url }}" target="_blank"
                                    style="color:#01AAED">{{ notice.is_notice }}</a></span>
                        {% endfor %}
                    </div>
                </div>
                <!--左边文章列表-->
                <div class="blog-main-left">
                    {% for article in articles %}
                        <div class="article shadow">
                            {% if article.avatar %}
                                <div class="article-left">
                                    <img src="{{ article.avatar.url }}" alt="avatar"
                                         style="max-width: 100%;border-radius: 20px;border: #ffeeba solid 1px;"/>
                                </div>
                            {% endif %}
                            <div class="article-right">
                                <div class="article-title">
                                    <a href="{% url 'article:article_detail' article.slug article.id %}">{{ article.title }}</a>
                                </div>
                                <div class="article-abstract">
                                    <p class="card-text">{{ article.excerpt }}...</p>
                                </div>
                            </div>
                            <div class="clear"></div>
                            <div class="article-footer">
                                <span><i class="fa fa-clock-o"></i>{{ article.pub_date }}</span>
                                <span class="article-author"><i class="fa fa-user"></i>{{ article.author }}</span>
                                <span><i class="fa fa-tag"></i>&nbsp;&nbsp;<a href="#">{{ article.category }}</a></span>
                                <span class="article-viewinfo"><i class="fa fa-eye"></i>{{ article.total_views }}</span>
                                <span class="article-viewinfo"><i
                                        class="glyphicon glyphicon-thumbs-up"></i>{{ article.likes }}</span>
                                <span class="article-viewinfo"><i
                                        class="fa fa-commenting"></i>{{ comments.count }}</span>
                            </div>
                        </div>
                    {% endfor %}
                    <!--翻页按钮开始-->
                    <div class="PageList" style="margin-left: 30%">
                        <nav aria-label="Page navigation">
                            <ul class="pagination pagination-lg">
                                {% if articles.has_previous %}
                                    <li><a href="?page={{ articles.previous_page_number }}">&laquo;</a></li>
                                {% endif %}
                                {% for content in articles.paginator.page_range %}
                                    {% if content == articles.number %}
                                        <li class="active"><a href="?page={{ content }}">{{ content }}</a></li>
                                    {% else %}
                                        <li><a href="?page={{ content }}">{{ content }}</a></li>
                                    {% endif %}
                                {% endfor %}
                                {% if articles.has_next %}
                                    <li><a href="?page={{ articles.next_page_number }}">&raquo;</a></li>
                                {% endif %}
                            </ul>
                        </nav>
                    </div>
                    <!--翻页按钮结束-->
                </div>
                <!--右边小栏目-->
                <div class="blog-main-right">
                    {% if user.is_authenticated %}

                        <div class="blogerinfo shadow">
                            <div class="blogerinfo-figure">
                                <img src="{{ user.avatar.url }}" alt="{{ user.username }}"/>
                            </div>
                            <p class="blogerinfo-nickname">{{ user.another }}</p>
                            <p class="blogerinfo-introduce">{{ user.bio }}</p>
                            <p class="blogerinfo-location"><i class="fa fa-location-arrow"></i> {{ city }}-{{ weather }}-{{ temperature }}</p>
                            <hr/>
                            <div class="blogerinfo-contact">
                                <a target="_blank" title="QQ交流" href="#"><i
                                        class="fa fa-qq fa-2x"></i></a>
                                <a target="_blank" title="给我写信" href="{% url 'common:about' %}"><i
                                        class="fa fa-envelope fa-2x"></i></a>
                                <a target="_blank" title="新浪微博" href="https://weibo.com/"><i
                                        class="fa fa-weibo fa-2x"></i></a>
                                <a target="_blank" title="码云" href="https://github.com/baixingqiang2"><i
                                        class="fa fa-git fa-2x"></i></a>
                            </div>
                        </div>


                    {% endif %}
                    <div></div><!--占位-->
                    <div class="blog-module shadow">
                        <div class="blog-module-title">热文排行</div>
                        <ul class="fa-ul blog-module-ul">
                            {% for h in hot %}
                                <li><i class="fa-li fa fa-hand-o-right"></i>
                                    <a style="font-size: 16px" href="{% url 'article:article_detail' h.slug h.id %}"
                                       title="{{ h.title }}">{{ h.title }}</a>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                    <div class="blog-module shadow">
                        <div class="blog-module-title">作者推荐</div>
                        <ul class="fa-ul blog-module-ul">
                            {% for atui in author_tui %}
                                <li><i class="fa-li fa fa-hand-o-right"></i><a style="font-size: 16px"
                                                                               href="{% url 'article:article_detail' atui.slug atui.id %}"
                                                                               target="_blank"
                                                                               title="{{ atui.title }}">{{ atui.title }}</a>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>

                    <div class="blog-module shadow">
                        <div class="blog-module-title">友情链接</div>
                        <ul class="blogroll">
                            {% for link in links %}
                                <li><a style="font-size: 16px" target="_blank" href="{{ link.linkurl }}"
                                       title="{{ link.name }}">{{ link.name }}</a>
                                </li>
                            {% endfor %}
                        </ul>

                    </div>
                </div>
                <div class="clear"></div>
            </div>
        </div>
    </div>
{% endblock content %}
</body>
</html>